<template>
  <view style="overflow-x: hidden;">
    <view class="bg">
      <image class="bg-img" src="/static/vip/bg.png" mode=""></image>
    </view>

    <view class="nav" :style="{ paddingTop: statusBarHeight + 'px' }">
      <image class="nav-back" src="/static/vip/back.png" mode="" @click="back"></image>
      <text class="nav-title">会员中心</text>
      <view class="nav-space"></view>
    </view>

    <view class="info" :style="{ marginTop: statusBarHeight + 44 + 'px' }">
      <image class="info-bg" src="/static/vip/info-bg.png" mode=""></image>

      <view class="info-content">
        <view class="info-avatar">
          <image style="border-radius: 50%;" class="info-avatar-pic" :src="userInfo.avatar" mode=""></image>
        </view>
        <view class="info-name">
          <text class="info-name">{{ userInfo.nick_name }}</text>
          <text class="info-level">开通套餐享专属特权</text>
        </view>
      </view>

      <view class="info-asset">
        <view class="info-asset-item">
          <text class="iai-title">当前剩余对话次数</text>
          <text class="iai-value">{{ num }}</text>
        </view>
        <!-- <view class="info-asset-item">
					<text class="iai-title">金币</text>
					<text class="iai-value">2563</text>
				</view>
				<view class="info-asset-item">
					<text class="iai-title">优惠券</text>
					<text class="iai-value">3</text>
				</view> -->
      </view>
    </view>

    <view class="main-title">
      <text>会员充值</text>
    </view>

    <scroll-view scroll-x>
      <view class="recharge">
        <view class="recharge-item" :class="current == index ? 'recharge-item-active' : ''"
          v-for="(item, index) in rechargeOptions" :key="index" :style="{ marginLeft: !index ? '30rpx' : '' }"
          @click="rechargeChange(index)">
          <view class="recharge-tag">
            <text class="recharge-tag-text"> {{ item.type == 1 ? '按次计费' : '按时计费' }} </text>
          </view>
          <text class="recharge-item-duration">{{ item.title }}</text>
          <view class="recharge-item-price">
            <text class="rmb">￥</text>
            <text class="recharge-item-price-text">{{ item.price }}</text>
          </view>
          <text v-if="item.type == 1" class="recharge-item-des">{{ '内含' + item.num + '次对话' }}</text>
          <text v-else class="recharge-item-des"> 无限次对话 </text>
          <text v-if="item.type == 1 && item.days != 0" class="recharge-item-des">{{ item.days + '天内有效' }}</text>
          <text style="text-decoration: line-through;font-size: 30rpx;" class="recharge-item-des">{{ item.origin_price
          }}</text>
        </view>
      </view>
    </scroll-view>

    <view class="button update" hover-class="hover" @click="updateNow">
      <text class="button-text">立即升级</text>
    </view>

    <text class="tip">专属AI 1秒响应</text>

    <view class="main-title">
      <text>会员特权</text>
    </view>

    <view class="privilege">
      <view class="privilege-item" v-for="(item, index) in privilegeList" :key="index" hover-class="hover"
        @click="privilegeClick(index)">
        <image class="privilege-item-pic" :src="item.pic" mode=""></image>
        <text class="privilege-item-text">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

<script>
const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
import { mapState } from 'vuex'
import {
  wxJsapiPay
} from '@/common/index';
// #ifdef H5
import VConsole from 'vconsole'
let u = uni.getStorageSync('userInfo');
if (u.member_id == 89 || u.member_id == 91) {
  const vConsole = new VConsole()
}
// #endif
export default {
  data() {
    return {
      statusBarHeight,
      current: 0,
      rechargeOptions: [],
      privilegeList: [
        {
          pic: '/static/vip/speed.png',
          text: '极速响应'
        },
        {
          pic: '/static/vip/coin.png',
          text: '尽享优惠'
        },
        {
          pic: '/static/vip/red-bag.png',
          text: 'AI红利'
        },
        {
          pic: '/static/vip/kefu.png',
          text: '专属客服'
        }
      ]
    }
  },
  computed: {
    ...mapState(['userInfo', 'num'])
  },
  onLoad() {
    this.$request('/api/Comb/index').then(res => {
      console.log(res)
      this.rechargeOptions = res.data.data
    })
  },
  methods: {
    rechargeChange(index) {
      this.current = index
    },
    updateNow() {
      uni.showLoading({
        mask: true
      })
      let chanel = 2;
      // #ifdef MP-WEIXIN
      chanel = 1
      // #endif
      this.$request('/api/Order/add', 'POST', {
        comb_id: this.rechargeOptions[this.current].comb_id,
        chanel: chanel
      }).then(async (res) => {
        console.log(res)
        // #ifdef H5
        if (/MicroMessenger/i.test(navigator.userAgent)) {
          wxJsapiPay(res.data, (r) => {
            var msg = r.err_msg ? r.err_msg : r.errMsg;
            console.log(msg)
            if (msg == 'get_brand_wcpay_request:ok') {
              uni.showModal({
                title: "温馨提示",
                content: "权益已开通成功！"
              })
              this.$request('/api/Member/checkNum', 'POST').then(re => {
                // 更新数量
                this.$store.commit('syncUserNum', re.data.num)
              })
            }
            console.log('pay r')
          }, (er) => {
            console.log(er.msg)
            // uni.showModal({
            // 	title: "温馨提示",
            // 	content: er.msg
            // })
            uni.showToast({
              title: '支付取消！',
              icon: "error"
            })
            console.log('pay rr')
          })
        }
        // #endif
        // #ifdef MP-WEIXIN
        let payParams = res.data;
        let [err, payRes] = await uni.requestPayment({
          provider: "wxpay",
          ...payParams,
          timeStamp: payParams.timestamp,
        });
        console.log(payRes);
        uni.hideLoading()
        if (!err && payRes.errMsg === "requestPayment:ok") {
          uni.showModal({
            title: "温馨提示",
            content: "权益已开通成功！"
          })
          this.$request('/api/Member/checkNum', 'POST').then(re => {
            // 更新数量
            this.$store.commit('syncUserNum', re.data.num)
          })
        }
        // #endif
        console.log('pay end')
      })
    },
    privilegeClick(index) {
      uni.showToast({
        icon: "none",
        title: `点击了「${this.privilegeList[index].text}」`
      })
    },
    back() {
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss">
.main-title {
  padding: 30rpx 30rpx;
  font-size: 34rpx;
  color: #1C1C1C;
}

.tip {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  color: #A5A3A2;
}

.rmb {
  font-size: 26rpx;
  color: #E3BE83;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 400rpx;
  z-index: -2;

  &-img {
    width: 100%;
    height: 100%;
  }
}

.hover {
  opacity: 0.7;
}

.nav {
  position: fixed;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 750rpx;
  height: 44px;
  padding: 0 30rpx;
  background-image: url('~@/static/vip/nav-bg.png');
  background-size: 100%;
  z-index: 99;

  &-back {
    width: 20rpx;
    height: 40rpx;
  }

  &-title {
    color: #FFFFFF;
    font-size: 42rpx;
  }

  &-space {
    width: 70rpx;
    height: 40rpx;
  }
}

.info {
  position: relative;
  padding: 0 15rpx;
  width: 730rpx;
  height: 360rpx;

  &-bg {
    position: absolute;
    width: 730rpx;
    height: 360rpx;
    z-index: -1;
  }

  &-content {
    padding: 70rpx 50rpx 0 50rpx;
    margin-bottom: 50rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  &-avatar {
    margin-right: 30rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 85rpx;
    height: 85rpx;
    background-color: #fff;
    padding: 1rpx;
    border-radius: 50%;

    &-pic {
      width: 83rpx;
      height: 83rpx;
    }
  }

  &-name {
    display: flex;
    flex-direction: column;
    color: #FFFFFF;
    font-size: 35rpx;
  }

  &-level {
    margin-top: 15rpx;
    font-size: 24rpx;
  }

  &-asset {
    padding: 0 50rpx;
    display: flex;
    flex-direction: row;
    align-items: center;

    &-item {
      display: flex;
      flex-direction: column;
    }
  }
}

.iai {
  &-title {
    margin-bottom: 20rpx;
    margin-right: 100rpx;
    font-size: 24rpx;
    color: #CFB386;
  }

  &-value {
    font-size: 35rpx;
    color: #FFFFFF;
  }
}

.recharge {
  position: relative;
  margin-bottom: 35rpx;
  display: flex;
  flex-direction: row;
  align-items: center;

  &-tag {
    position: absolute;
    top: -2rpx;
    left: -2rpx;
    width: 170rpx;
    height: 36rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background-image: url('~@/static/vip/tag.png');
    background-size: 100%;

    &-text {
      font-size: 20rpx;
      color: #FFFFFF;
      text-align: center;
    }
  }

  &-item {
    position: relative;
    padding: 40rpx 0;
    margin-left: 15rpx;
    width: 200rpx;
    height: 230rpx;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: solid 2rpx #F2F2F3;
    border-radius: 12rpx;

    &-active {
      border-color: #EDD2A9;
      background-color: #FBF1E5;
    }

    &-duration {
      margin-bottom: 30rpx;
      font-size: 26rpx;
      color: #1C1C1C;
    }

    &-price {
      margin-bottom: 20rpx;
      display: flex;
      flex-direction: row;
      align-items: baseline;

      &-text {
        font-size: 48rpx;
        color: #E3BE83;
      }
    }

    &-des {
      font-size: 22rpx;
      color: #A5A3A2;
    }
  }
}

.button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 85rpx;
  border-radius: 50rpx;
  background-image: linear-gradient(#EFCF9E, #E4BF85);

  &-text {
    font-size: 30rpx;
    color: #1C1C1C;
  }
}

.update {
  margin: 35rpx 30rpx 20rpx 30rpx;
}

.privilege {
  padding: 0 30rpx;
  margin-bottom: 40rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;

  &-item {
    margin: 0 23rpx;
    margin-bottom: 25rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    &-pic {
      width: 80rpx;
      height: 80rpx;
      margin-bottom: 20rpx;
    }

    &-text {
      font-size: 24rpx;
      color: #383738;
    }
  }
}

.level {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 750rpx;
  height: 466rpx;
  background-image: url('~@/static/vip/vip-bg.png');
  background-size: 100%;

  &-rate {
    position: absolute;
    top: 43rpx;
    left: 33rpx;
    display: flex;
    flex-direction: row;
    align-items: center;

    &-text1 {
      margin-right: 20rpx;
      color: #1C1C1C;
      font-size: 34rpx;
    }

    &-text2 {
      font-size: 34rpx;
      color: #C07C07;
    }
  }

  &-info {
    // position: absolute;
    // top: 188rpx;
    // left: 350rpx;
    margin-top: 70rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    &-icon {
      margin-bottom: 20rpx;
      width: 48rpx;
      height: 38rpx;
    }

    &-text {
      margin-bottom: 20rpx;
      font-size: 26rpx;
      color: #292929;
    }

    &-integral {
      font-size: 40rpx;
      color: #C07C07;
    }
  }

  &-distance {
    position: absolute;
    left: 30rpx;
    right: 30rpx;
    bottom: 35rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;

    &-text {
      font-size: 26rpx;
      color: #292929;
    }

    &-button {
      padding: 0 30rpx;
      height: 60rpx;
    }
  }
}
</style>
